@import './modules/reset.scss';
@import './modules/header.scss';
@import './modules/footer.scss';
 
#carousel{
   width:100%;height:700px; position:relative;overflow: hidden;
   ul{
      height:700px;position:absolute;left: 0;top: 0;
      li{
         // width:1263px;
         height:700px;
         float: left;
      }
      li:nth-child(1),.car-li-01{
         background: url(../images/carousel01.jpg) no-repeat center;
         .car-info{
            width:220px;
            margin: 150px 0 0 300px;
            .car-info-detail{
               width:100%;height:210px;
            }
            a{font-size: 20px;text-decoration: none;
            color:#812345;}
         }
      }
      li:nth-child(2){
         background: url(../images/carousel02.jpg) no-repeat center;
         .car-info{
            width:455px;
            margin: 200px 0 0 650px;
            .car-info-detail{
               width:100%;height:160px;
            }
            a{font-size: 20px;text-decoration: none;
            color:orangered; }
         }
      }
      li:nth-child(3){
         background: url(../images/carousel03.jpg) no-repeat center;
         .car-info{
            width:590px;
            margin: 150px 0 0 100px;
            .car-info-detail{
               width:100%;height:300px;
            }
            a{font-size: 20px;text-decoration: none;
            color:white;margin-left:150px;}
         }
      }
   }
   ol{
      position:absolute;right:42%;bottom: 50px;
      li{
         width: 70px;height: 5px;float:left;
         background: rgba(235, 230, 230, 0.5);border-radius: 25%;
      }
       .ac{background:white;}
   }
   .btn{
      text-decoration: none;position: absolute;top: 50%;
      margin-top: -10px;height: 40px;line-height: 32px;
      text-align: center;width: 40px;font-size: 40px;
      // vertical-align: middle;
      color: #fff;background: rgba(0,0,0,0.5);
   }
   #goPrev{left: 0;}
   #goNext{right: 0;}
}

// main
main{
   width:100%;height:auto;
   div{
      width:100%;height:100%;;
      ul{
         display: flex;
         justify-content: space-between;
         li{
            width: 24%;height:175px;overflow: hidden;position: relative;
            img{
               width:100%;height:175px;
            }
            img:hover{
               transform: scale(1.1);
               transition: all 1s ease-in-out ;
            }
            .good-desc{
               width:100%;;height:50px;
               position: absolute;top:15px;
               text-align: center;color:#333;
               cursor: pointer;
            }
         }
      }
   }
   .more-goods{
      width:90%;height:auto;
      margin:20px auto;
      // display: flex;
      // flex-wrap: wrap;
      h3{
         text-align: center;
         margin-top:50px;
      }
      .list-box{
         width:90%;margin:40px auto;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-around;
         div{
            width:300px;height:300px;
            text-align: center;
            
            img:hover{
               box-shadow: -2px 2px 10px;
               transition: all 1s ease
            }
         }
         .p1{
            font-size:18px;
         }
         .p2{
            font-size:14px;
         }
         .p3{
            font-size:12px;
         }
      }
   }
}
.fen-ye{
   width:220px;
   margin:0 auto;
   button{
      border-radius: 5px;
      outline: none;
   }
}